<template>
  <div @click='tip($event)' ref="signedlist" id='signedlist' class="signedlist">

    <div class="max"></div>

    <!-- <img :src="img" alt=""> -->
    <div style="display:none" class="app">
      <img src="http://r3.ihuipao.cn/wuxih5/dist/static/static/img/11.jpg" alt="">
      <div class="cc">
        <div class="aa">
          <div>
            <h4>恭喜您已成功报名{{raceName}}赛事，可以邀请您的小伙伴一起来哦</h4>
          </div>

        </div>
        <div class="bb">
          <img src="http://r3.ihuipao.cn/wuxih5/dist/static/static/img/83.png" alt="">

        </div>
      </div>
      <p class="recommend">欢迎分享至朋友圈</p>

    </div>

    <div class="bbox">

    </div>
    <card>
      <div slot="content">

        <!-- <cell :title="'项目'" :value="name"></cell> -->
        <form-preview :header-label="projectName" :header-value="stateMessage" :body-items="list">

        </form-preview>

        <group>
          <group-title slot="title"></group-title>

          <cell @click.native="buttonClick(item)" v-for='(item,index) in buttonList' :key='index' :title="item.value" is-link></cell>
        </group>
        <!-- <cell-form-preview :list="list"></cell-form-preview> -->

        <!-- <Cell @click.native="buttonClick(item)" v-for='(item,index) in buttonList' :key='index' value-align='left' is-link>{{item.value}}</Cell> -->

        <!-- <div v-transfer-dom>
                    <confirm v-model="show" title="重要提示" @on-confirm="refund">
                        <p style="text-align:center;">
                            {{$t('message.tuikuan1')}}，{{$t('message.tuikuan2')}}{{this.amount}}{{$t('message.tuikuan3')}}。 {{$t('message.tuikuan4')}}
                        </p>
                        <group class="border-left border-right">
                            <x-input class="" placeholder="请输入证件号" v-model="idnum2"></x-input>
                        </group>
                    </confirm>
                </div> -->

      </div>
    </card>

    <div v-transfer-dom>
      <alert v-model="showtip1" title="抽签代码说明">
        <div style="text-align: left;">
          <p style="padding-bottom: 10px;">1、抽签代码不等于您的候补顺序号，您现在在未中签选手中的排名为您的抽签代码减去该项目的中签选手数；</p>
          <p style="padding-bottom: 10px;">2、如果您需要参与候补，请您在规定时间内完成支付，否则表示您放弃候补；</p>
          <p>3、候补顺序号将在报名关闭后根据选手的支付情况及未中签选手的抽签代码按自小到大的顺序进行统一更新。</p>
        </div>
      </alert>
    </div>

    <div class="xxx" v-transfer-dom>
      <x-dialog ref="img" v-model="showToast" class="dialog-demo">
        <div class='images'>
          <img :src="img" alt="">
        </div>
        <p>长按保存图片</p>
        <div @click="showToast=false">
          <span class="vux-close"></span>
        </div>
      </x-dialog>
    </div>

  </div>

</template>


<script type="text/ecmascript-6">
const STARTSTR = "进行中"; //进行中提示
const ENDSTR = "已经结束"; //结束提示
const UNSTARTSTR = "尚未开始"; //尚未开始提示
import Bus from "@/common/js/bus.js";

//let clock1 = 1
var isMini = false;
//判断环境 是否在小程序
var checkIsFromMiniProgram = function() {
  wx.miniProgram.getEnv(function(res) {
    console.log("minprogram:" + res.miniprogram); // true
    //  alert(JSON.stringify(res));
    if (res.miniprogram === true) {
      isMini = true;
      // alert('isMiniprogram:' + res.miniprogram);
    } else {
      isMini = false;
      // alert("========公众号");
    }
  });
};

import {
  isIdNumber,
  dateStringToDateTime,
  timeFormat,
  startTime,
  setTitle,
  toDecimal2
} from "@/common/js/main.js";

import { cookie } from "vux";
import { sendPay } from "@/api/sendPay.js";
import qs from "qs";
import { indexedDB } from "@/api/indexedDB.js";
import {
  Alert,
  ViewBox,
  XDialog,
  CellFormPreview,
  Card,
  PopupRadio,
  Radio,
  Tabbar,
  TabbarItem,
  debounce,
  XInput,
  Group,
  XButton,
  Grid,
  GridItem,
  FormPreview,
  Cell,
  LoadMore,
  Actionsheet,
  Toast,
  Confirm,
  GroupTitle,
  TransferDomDirective as TransferDom
} from "vux";
import { setTimeout } from "timers";

export default {
  props: ["page", "data1", "data2", "idnumber", "index11"],
  data() {
    return {
      showtip1: false,
      raceName: "",
      showToast: false,
      amount: "",
      show: false,
      idnum2: "",
      name: "",
      list: [],
      stateMessage: "",
      bib: "",
      buttonList: [],
      myKey: "",
      key: "",
      idnum: "",
      aaa: "",
      img: "",
      img123: ""
    };
  },
  computed: {},
  beforeCreate() {},
  created() {
    var _this = this;
    // console.log("---");
    // console.log(this.data1);
    // console.log(this.data2);
    // console.log(this.idnumber);

    //console.log('---')
    //console.log('---')
    var raceinfo = JSON.parse(window.localStorage.getItem("raceinfo"));
    this.raceName = raceinfo.name;

    this.idnum = this.idnumber;
    checkIsFromMiniProgram();
    //console.log('---')
    //console.log(this.data1)
    if (!!this.data1.raceMessage) {
      this.raceid = this.data1.raceMessage.id;
    } else {
      this.raceid = window.localStorage.getItem("raceId");
    }

    // window.localStorage.getItem("raceId")||;
    //console.log(_this.data1);
    this.key = _this.data1._key;
    this.state = this.data1.state;
    this.eventState = this.data1.state;

    this.eventId = this.data1.eventid;
    this.projectName = this.data1.event.name;
    //alert(2)
    //console.log(this.data1);
    if (!!this.data1.refundid && !!this.data1.invite) {
      var message = "报名成功/邀请码报名";
      this.stateMessage = message;
    } else if (!!this.data1.refundid) {
      var message = "有退款";
      this.stateMessage = message;
    } else if (!!this.data1.pay_at) {
      var message = "/已支付";
    } else {
      var message = "/未支付";
    }

    this.getorder();
  },
  mounted() {},
  methods: {
    tip(event) {
      if (event.target.className.indexOf("undraw_tip") != -1) {
        // this.$vux.toast.show({
        //   position: "bottom",
        //   time: 10000,
        //   type: "text",
        //   text:
        //     "抽签代码不等于选手的候补顺序号，候补顺序号将在报名关闭后按支付报名费选手的抽签代码自小到大的顺序进行统一更新",
        //   width: "20em",
        //   onShow() {
        //     console.log("Plugin: I'm showing");
        //   },
        //   onHide() {
        //     console.log("Plugin: I'm hiding");
        //   }
        // });
        this.showtip1 = true;
      } else if (event.target.className.indexOf("undraw_tip") != -1) {
        this.$vux.toast.show({
          position: "bottom",
          time: 10000,
          type: "text",
          width: "20em",
          text:
            "候补序号表示您在候补队列中的位置，当有选手退出报名时，会在退款结算完毕后的次日释放名额。",
          onShow() {
            console.log("Plugin: I'm showing");
          },
          onHide() {
            console.log("Plugin: I'm hiding");
          }
        });
      }
      //console.log(event.target.className)
    },
    getImg() {
      if (!!this.img) {
        return;
      }

      var _this = this;
      // 获取内容id
      var content = this.$refs.signedlist.getElementsByClassName("app");
      //console.log(content);
      var content2 = $(content).clone(true);
      $(content).css("display", "none");
      content2.width($(content).width() + "px");
      content2.height($(content).height() + "px");
      $(".bbox").innerHTML = "";
      $(".bbox").append(content2);

      html2canvas(content2, {
        onrendered: function(canvas) {
          //添加属性
          canvas.setAttribute("id", "thecanvas");
          //console.log(canvas)
          //读取属性值
          // var value= canvas.getAttribute('id');

          //_this.$refs.img.innerHTML = "";
          //console.log(_this.index11)
          document
            .querySelectorAll(".xxx")
            [_this.index11].querySelector(".images").innerHTML =
            "";

          var dataURL = canvas.toDataURL("image/png");
          //alert(img_data1)
          //var abc=''
          //alert(typeof abc);
          //alert(typeof img_data1);
          // for(var i=0;i<abc.length;i++){
          //   if(abc[i]!==img_data1[i]){
          //     alert(i)
          //     alert(abc[i])
          //     alert(img_data1[i])
          //   }
          // }
          //alert(img_data1===abc)
          //console.log(img_data1 )
          //var img_data1=''
          var img2 = new Image();
          img2.src = dataURL;
          _this.img = dataURL;
          document
            .querySelectorAll(".xxx")
            [_this.index11].querySelector(".images")
            .appendChild(img2);
          //_this.$refs.img.appendChild(canvas);
          content2.css("display", "none");
        },
        useCORS: true,
        width: content2.width(),
        height: content2.height()
      });
    },
    getorder() {
      var _this = this;
      if (!!this.data1.orderid) {
        this._getorder();
      } else {
        console.log(this.data1);
        //alert(1);
        if (!!this.data1.refundid && !!this.data1.invite) {
          var message = "报名成功/邀请码报名";
          this.stateMessage = message;
        } else if (!!this.data1.refundid) {
          var message = "有退款";
          this.stateMessage = message;
        } else if (!!this.data1.pay_at) {
          var message = "/已支付";
        } else {
          var message = "/未支付";
        }

        //console.log(response)
        //如果没有支付 显示去支付
        if (!!this.data1.refundid && !!this.data1.invite) {
          var message = "报名成功/邀请码报名";
          this.stateMessage = message;
        } else if (!!this.data1.refundid) {
          this.stateMessage = "有退款";
        } else if (this.data1.state === "normal" && !!this.data1.pay_at) {
          this.stateMessage = "报名成功/已支付";
          if (!!this.data1.bib) {
            this.stateMessage = this.data1.bib;
          }
        } else if (this.data1.state === "normal") {
          //this.stateMessage = "中签" + message;

          this.stateMessage = "报名正常" + message;
          if (!!this.data1.bib) {
            this.stateMessage = this.data1.bib;
          }
        } else if (this.data1.state === "waitfail") {
          this.stateMessage = `候补结束，未获得名额`;
        } else if (this.data1.state === "wait") {
          if (!!this.data1.pos) {
            //候补 有post人数
            this.stateMessage = `候补中,前边有${this.data1.pos}人` + message;
          } else {
            //候补 没有post人数
            this.stateMessage = `候补中` + message;
          }
        } else if (this.data1.state == "draw") {
          this.stateMessage = `等待抽签`;
        } else if (this.data1.state === "undraw") {
          if (!!this.data1.wait_pos) {
            this.stateMessage =
              `未中签(候补顺序${this.data1.wait_pos})` + message;
          }
          this.stateMessage = `未中签` + message;
        } else if (this.data1.state === "audit") {
          this.stateMessage = `审核中` + message;
        } else if (this.data1.state === "auditfail") {
          this.stateMessage = `审核未通过(${this.data1.refusemsg})` + message;
        }

        //按钮逻辑
        if (
          _this.data1.pay_at === "" ||
          typeof _this.data1.pay_at === "undefined" ||
          (_this.data1.pay_at == null &&
            (typeof _this.data1.refundid == "undefined" ||
              _this.data1.refundid === 0))
        ) {
          //显示支付
          _this.state = 0;
          //                if (_this.payable == 1) {
          //                  //可以支付
          //                  //console.log(_this.eventData)
          //                  //console.log(_this.eventData.paystate)
          //
          //
          //
          //                  //paystate，有四种状态：unstart，未开放，finish已结束，close，关闭，opening，开放中。
          //                  //remain，剩余名额数，当paystate状态为opening的时候，展示该字段。
          //                  //如果该数>=0，显示还有**个名额
          //                  //如果<0，显示已额满，有abs(remain)个人在候补。
          //
          //                } else if (_this.payable == 0) {
          //                  //不支付
          //                }

          //如果不能支付 隐藏支付按钮

          if (_this.data1.event.paystate == "unstart") {
            _this.buttonList.push({
              label: "支付",
              value: "去支付(未开放)"
            });
          } else if (_this.data1.event.paystate == "finish") {
            _this.buttonList.push({
              label: "支付",
              value: "去支付(已结束)"
            });
            //_this.buttonList.push("去支付(已结束)");
          } else if (_this.data1.event.paystate == "close") {
            _this.buttonList.push({
              label: "支付",
              value: "去支付(支付关闭)"
            });
            //_this.buttonList.push("去支付(已关闭)");
          } else if (_this.data1.event.paystate == "opening") {
            if (_this.data1.event.remain >> 0 >= 0) {
              _this.buttonList.push({
                label: "支付",
                // value: `去支付(开放中),有${Math.abs(
                //  _this.data1.event.remain
                // )}个名额`
                value: `去支付(开放中)`
              });
            } else if (_this.data1.event.remain >> 0 < 0) {
              _this.buttonList.push({
                label: "支付",
                // value: `去支付(已额满),有${Math.abs(
                //   _this.data1.event.remain
                // )}个人在候补`,
                value: `去支付(已额满)`
              });
            } else {
              _this.buttonList.push({
                label: "支付",
                value: _this.$t("message.gopay")
              });
            }
          }

          if (!_this.data1.pay_at) {
            //未支付
            _this.buttonList.push({ label: "删除", value: "删除该报名" });
            //_this.list1.push("删除该报名");
          }

          //_this.value = [_this.$t("message.gopay")];
          //隐藏查看详情

          //历史成绩
        } else if (
          ((_this.data1.pay_at || _this.data1.pay_at !== "") &&
            typeof _this.data1.refundid == "undefined") ||
          _this.data1.refundid == 0
        ) {
          //显示退款
          _this.state = 1;
          //console.log('-_+_+_+_+_+')
          //console.log(_this.data1.event.refundable)
          if (_this.data1.event.refundable != 1) {
            //_this.list1.push(_this.$t("message.seedetails"));
          } else {
            _this.buttonList.push({ label: "退款", value: "退款" });

            //_this.buttonList = [_this.$t("message.refund1")];
          }
        } else if (
          ((_this.data1.pay_at || _this.data1.pay_at !== "") &&
            typeof _this.data1.refundid !== "undefined") ||
          _this.data1.refundid !== 0
        ) {
          //显示退款详情
          // _this.state = 2;
          //_this.data1.push(_this.$t("message.detailsofrefunds"));

          //_this.buttonList.push({ label: "修改", value: "修改报名资料" });
          _this.buttonList.push({ label: "删除", value: "修改报名资料" });
          // _this.value = [_this.$t("message.detailsofrefunds")];
        }

        //console.log(_this.editable)
        _this.buttonList.push({ label: "详情", value: "查看详情" });
        _this.buttonList.push({ label: "修改", value: "修改报名资料" });

        // if (
        //   !!cookie.get("_from") &&
        //   !_this.data1.refundid &&
        //   !!_this.data1.pay_at
        // ) {
        //   _this.buttonList.push({ label: "分享", value: "分享返现" });
        // }
        // if (_this.data1.event.editable) {
        //   _this.buttonList.push({ label: "修改", value: "修改报名资料" });

        // }

        this.name = this.data1.event.name;

        //姓名 组别 费用 下单时间  按钮[详细资料,修改资料,取消报名,申请退款,去支付]
        //console.log("-12345-");
        //console.log(this.data1);

        this.list.push({
          label: "姓名",
          value: `${this.data1.name}`
        });
        //alert(this.data1.bib)

        if (!!this.data1.bib) {
          this.list.push({
            label: "参赛号",
            value: `${this.data1.bib}`
          });
        }

        this.list.push({
          label: "组别",
          value: `${this.data1.event.name}`
        });

        this.list.push({
          label: "费用",
          value: `${toDecimal2(this.data1.event.price)}`
        });

        //console.log(this.data1)

        if (this.data1.state == "undraw" && !!this.data1.wait_pos) {
          this.list.push({
            label: "抽签代码",
            value: `${this.data1.wait_pos}`
          });
        }

        if (this.data1.state == "wait" && !!this.data1.wait_pos) {
          this.list.push({
            label: "候补顺序",
            value: `${this.data1.wait_pos}`
          });
        }
        //tipDOM

        setTimeout(() => {
          var doms = document.querySelectorAll(".weui-form-preview__label");
          [].forEach.call(doms, e => {
            //console.log(e.innerHTML);
            if (e.innerHTML == "抽签代码") {
              var node = document.createElement("span");
              node.setAttribute("class", "undraw_tip tip");
              node.innerHTML = "?";
              e.appendChild(node);
            } else if (e.innerHTML == "候补顺序") {
              var node = document.createElement("span");
              node.setAttribute("class", "wait_tip tip");
              node.innerHTML = "?";
              e.appendChild(node);
            }
          });
        }, 0);
      }
    },
    //获取订单信息
    _getorder() {
      var _this = this;
      this.axios
        .post(
          `${window.host}order/query`,
          qs.stringify({
            id: this.data1.orderid,
            idnum: this.idnumber
          })
        )
        .then(response => {
          if (response.data.code == "200") {
            var payMessage = "";
            var message = "";
            //判断支付状态

            if (!!this.data1.refundid) {
              //有退款
              payMessage = "/有退款";
            } else if (!!this.data1.pay_at && !this.data1.refundid) {
              //已支付
              payMessage = "/已支付";
            } else if (!!this.data1.pay_at && !!this.data1.invite) {
              //邀请码报名
              payMessage = "/已支付";
            } else if (
              !this.data1.pay_at &&
              !!this.data1.refundid &&
              !!this.data1.invite
            ) {
              //邀请码报名
              payMessage = "/未支付";
            } else if (!this.data1.pay_at) {
              //未支付
              payMessage = "/未支付";
            }

            //判断报名状态
            if (this.data1.state === "normal" && !!this.data1.pay_at) {
              message = "报名成功";
            } else if (this.data1.state === "normal" && !!this.data1.invite) {
              message = "报名成功";
            } else if (this.data1.state === "normal") {
              message = "报名正常";
            } else if (this.data1.state === "waitfail") {
              message = `候补结束，未获得名额`;
            } else if (this.data1.state === "wait") {
              if (!!this.data1.pos) {
                //候补 有post人数
                message = `候补中,前边有${this.data1.pos}人`;
              } else {
                //候补 没有post人数
                message = `候补中`;
              }
            } else if (this.data1.state == "draw") {
              message = `等待抽签`;
            } else if (this.data1.state === "undraw") {
              message = `未中签`;
            } else if (this.data1.state === "audit") {
              message = `未中签`;
            } else if (this.data1.state === "auditfail") {
              message = `审核未通过(${this.data1.refusemsg})`;
              if (!!this.data1.refusemsg) {
                message = `审核未通过`;
              }
            }

            this.stateMessage = message + payMessage;

            //按钮逻辑
            if (
              _this.data1.pay_at === "" ||
              typeof _this.data1.pay_at === "undefined" ||
              (_this.data1.pay_at == null &&
                (typeof _this.data1.refundid == "undefined" ||
                  _this.data1.refundid === 0))
            ) {
              //显示支付
              _this.state = 0;
              //                if (_this.payable == 1) {
              //                  //可以支付
              //                  //console.log(_this.eventData)
              //                  //console.log(_this.eventData.paystate)
              //
              //
              //
              //                  //paystate，有四种状态：unstart，未开放，finish已结束，close，关闭，opening，开放中。
              //                  //remain，剩余名额数，当paystate状态为opening的时候，展示该字段。
              //                  //如果该数>=0，显示还有**个名额
              //                  //如果<0，显示已额满，有abs(remain)个人在候补。
              //
              //                } else if (_this.payable == 0) {
              //                  //不支付
              //                }

              if (_this.data1.event.paystate == "unstart") {
                _this.buttonList.push({
                  label: "支付",
                  value: "去支付(未开放)"
                });
              } else if (_this.data1.event.paystate == "finish") {
                _this.buttonList.push({
                  label: "支付",
                  value: "去支付(已结束)"
                });
                //_this.buttonList.push("去支付(已结束)");
              } else if (_this.data1.event.paystate == "close") {
                _this.buttonList.push({
                  label: "支付",
                  value: "去支付(已关闭)"
                });
                //_this.buttonList.push("去支付(已关闭)");
              } else if (_this.data1.event.paystate == "opening") {
                if (_this.data1.event.remain >> 0 >= 0) {
                  _this.buttonList.push({
                    label: "支付",
                    // value: `去支付(开放中),有${Math.abs(
                    //   _this.data1.event.remain
                    // )}个名额`,
                    value: `去支付(开放中)`
                  });
                } else if (_this.data1.event.remain >> 0 < 0) {
                  _this.buttonList.push({
                    label: "支付",
                    // value: `去支付(已额满),有${Math.abs(
                    //   _this.data1.event.remain
                    // )}个人在候补`,
                    value: `去支付(已额满)`
                  });
                } else {
                  _this.buttonList.push({
                    label: "支付",
                    value: _this.$t("message.gopay")
                  });
                }
              }

              if (!_this.data1.pay_at) {
                //未支付
                _this.buttonList.push({ label: "删除", value: "删除报名资料" });
                //_this.list1.push("删除该报名");
              }

              //_this.value = [_this.$t("message.gopay")];
              //隐藏查看详情

              //历史成绩
            } else if (
              ((_this.data1.pay_at || _this.data1.pay_at !== "") &&
                typeof _this.data1.refundid == "undefined") ||
              _this.data1.refundid == 0
            ) {
              //显示退款
              _this.state = 1;
              //console.log('-_+_+_+_+_+')
              //console.log(_this.data1.event.refundable)
              if (_this.data1.event.refundable != 1) {
                //_this.list1.push(_this.$t("message.seedetails"));
              } else {
                _this.buttonList.push({ label: "退款", value: "退款" });

                //_this.buttonList = [_this.$t("message.refund1")];
              }
            } else if (
              ((_this.data1.pay_at || _this.data1.pay_at !== "") &&
                typeof _this.data1.refundid !== "undefined") ||
              _this.data1.refundid !== 0
            ) {
              //显示退款详情
              // _this.state = 2;
              //_this.data1.push(_this.$t("message.detailsofrefunds"));

              //_this.buttonList.push({ label: "修改", value: "修改报名资料" });
              _this.buttonList.push({ label: "删除", value: "删除报名" });
              // _this.value = [_this.$t("message.detailsofrefunds")];
            }

            //console.log(_this.editable)
            _this.buttonList.push({ label: "详情", value: "查看详情" });
            _this.buttonList.push({ label: "修改", value: "修改报名资料" });

            // console.log('-123-')
            // console.log(!cookie.get('_from') )
            // console.log(!_this.data1.refundid)
            // console.log(!!_this.data1.pay_at)
            // if (
            //   !!cookie.get("_from") &&
            //   !_this.data1.refundid &&
            //   !!_this.data1.pay_at
            // ) {
            //   _this.buttonList.push({ label: "分享", value: "分享返现" });
            // }
            //_this.buttonList.push({ label: "分享", value: "分享" });

            // if (_this.data1.event.editable) {
            //   _this.buttonList.push({ label: "修改", value: "修改报名资料" });

            // }

            this.name = this.data1.event.name;

            //姓名 组别 费用 下单时间  按钮[详细资料,修改资料,取消报名,申请退款,去支付]

            this.list.push({
              label: "姓名",
              value: `${this.data1.name}`
            });

            if (!!this.data1.bib) {
              this.list.push({
                label: "参赛号",
                value: `${this.data1.bib}`
              });
            }

          
            this.list.push({
              label: "组别",
              value: `${this.data1.event.name}`
            });

            this.list.push({
              label: "费用",
              value: `${toDecimal2(this.data1.event.price)}`
            });

            if (!!response.data.data.created_at) {
              this.list.push({
                label: "下单时间",
                value: `${response.data.data.created_at}`
              });
            }

            if (!!this.data1.invite) {
              this.list.push({
                label: "邀请码",
                value: `${this.data1.invite}`
              });
            }

            if (this.data1.state === "undraw" && !!this.data1.wait_pos) {
              this.list.push({
                label: "抽签代码",
                value: `${this.data1.wait_pos}`
              });
            }

            if (this.data1.state === "wait" && !!this.data1.wait_pos) {
              this.list.push({
                label: "候补顺序",
                value: `${this.data1.wait_pos}`
              });
            }

            //tipDOM

            setTimeout(() => {
              var doms = document.querySelectorAll(".weui-form-preview__label");
              [].forEach.call(doms, e => {
                //console.log(e.innerHTML);
                if (e.innerHTML == "抽签代码") {
                  var node = document.createElement("span");
                  node.setAttribute("class", "undraw_tip tip");
                  node.innerHTML = "?";
                  e.appendChild(node);
                } else if (e.innerHTML == "候补顺序") {
                  var node = document.createElement("span");
                  node.setAttribute("class", "wait_tip tip");
                  node.innerHTML = "?";
                  e.appendChild(node);
                }
              });
            }, 0);

            //console.log(this.data1);

            // this.list.push({
            //   label: "下单时间",
            //   value: `${toDecimal2(this.data1.event.price)}`
            // });
          } else {
            this.$vux.toast.show({
              type: "warn",
              text: response.data.msg
            });
          }
        });
    },
    goEdit() {
      //修改报名资料

      this.$router.push({
        name: "modify",
        params: {
          eventid: this.eventId,
          idnum: this.idnum,
          projectName: this.projectName,
          state: this.state1,
          eventState: this.eventState
        }
      });
    },
    buttonClick(item) {
      var _this = this;
      switch (item.label) {
        case "分享":
          //_this.router.push({'/share'})
          //_this.showToast = true;

          break;
        case "支付":
          _this.pay();
          break;
        case "退款":
          //_this.show=true;
          _this._getRefund();
          //_this.refund();
          break;
        case "删除":
          this.$vux.confirm.show({
            title: "删除报名",
            content:
              "每个证件号（每名选手）至多可以删除一次报名，删除报名后，可以重新报名任何其它项目，您当前项目的报名资格将不再保留。",
            // 组件除show外的属性
            onCancel() {},
            onConfirm() {
              //console.log(_this.key)
              //console.log(_this.idnum)
              //return
              _this.axios
                .post(
                  `${window.host}registration/del`,
                  qs.stringify({
                    id: _this.key,
                    idnum: _this.idnum
                  })
                )
                .then(response => {
                  if (response.data.code == "200") {
                    _this.$vux.toast.show({
                      type: "success",
                      text: "删除成功",
                      onHide() {
                        indexedDB(
                          "IDNumber",
                          "remove",
                          this.RACEID,
                          "",
                          function(a) {}.bind(this)
                        );
                      }
                    });
                  } else {
                    if (response.data.code == "0") {
                      _this.$vux.toast.show({
                        type: "warn",
                        text: response.data.msg
                      });
                    }
                    //console.log(response)
                    // _this.$vux.toast.show({
                    //   type: "warn",
                    //   text: response.data.msg
                    // });
                  }
                });
            }
          });
          // _this.$router.push({
          //   name: "declare",
          //   params: { type: "del", key: _this.key, id: _this.idnum }
          // });
          break;
        case "修改":
          _this.goEdit();
          break;
        case "详情":
          cookie.set("idnum", this.idnum);
          //window.location.href='www.baidu.com'
          _this.$router.push({
            name: "message",
            query: { race_id: _this.raceid, _key: this.key }
          });
          break;
        default:
      }
      //console.log(item);
    },
    refund() {
      if (this.idnum2 == "") {
        this.$vux.toast.show({
          type: "warn",
          text: this.$t("message.idnumbercannotbeempty")
        });
        return;
      }

      if (this.idnum !== this.idnum2) {
        this.$vux.toast.show({
          type: "warn",
          text: this.$t("message.idnumberisinconsistent")
        });
        return;
      }

      this.axios
        .post(
          `${window.host}refund/create`,
          qs.stringify({
            id: this.key,
            idnum: this.idnum2
          })
        )
        .then(response => {
          if (response.data.code == "200") {
            this.$vux.toast.show({
              type: "success",
              text: this.$t("message.refundsuccessfully")
            });
            history.go(0);
          } else {
            //console.log(response)
            this.$vux.toast.show({
              type: "warn",
              text: response.data.msg
            });
          }
        });
    },
    //退款规则
    _getRefund() {
      /* this.$vux.loading.show({
         text: '退款中'
         })*/
      /*   if (this.state == 0) {
         return
         }*/
      let _this = this;
      //console.log('---')
      //console.log(this.key)

      this.axios
        .post(
          `${window.host}refund/rule`,
          qs.stringify({
            //eventid: this.eventId,
            id: this.key
          })
        )
        .then(function(response) {
          if (response.data.code == "200") {
            _this.eventData = response.data.data;
            _this.amount = response.data.data.amount;
            _this.show = true;
            _this.$router.push({
              name: "declare",
              params: {
                type: "refund",
                key: _this.key,
                id: _this.idnum,
                amount: _this.amount
              }
            });
          } else {
            //_this.$router.push({name: 'declare', params: {type: 'refund', key: _this.key, id: _this.idnum,amount:_this.amount}})
            _this.$vux.toast.show({
              type: "warn",
              text: response.data.msg
            });
          }
          /*_this.$vux.loading.hide()*/
        });
    },
    pay() {
      //console.log("支付");

      var _this = this;

      //console.log(1);
      //console.log(_this.data1.event.payable);

      if (isMini == true) {
        if (_this.data1.event.payable != 1) {
          return;
        }
        //console.log(this.key);

        sendPay(`${window.host}registration/pay`, {
          //raceid: this.raceid,
          id: this.key
        }).then(response => {
          if (response.data.code == "200") {
            let orderid = response.data.data.url.replace(
              "https://ihuipao.cn/pay/show/",
              ""
            );

            let openid = window.localStorage.getItem("openid");
            //let orderid = this.lists.orderid;
            //console.log(orderid);
            //console.log(openid);
            this.axios
              .post(
                `${window.host}api/miniprogram/pay`,
                qs.stringify({
                  orderid: orderid,
                  openid: openid,
                  app: "registration"
                })
              )
              .then(
                response => {
                  if (response.data.code == "200") {
                    var payParam = {
                      appId: response.data.data.appId,
                      nonceStr: response.data.data.nonceStr,
                      package: response.data.data.package,
                      signType: response.data.data.signType,
                      timeStamp: response.data.data.timeStamp,
                      paySign: response.data.data.paySign,
                      _key: this.key
                    };

                    var url =
                      "/pages/wxpay/wxpay?payParam=" +
                      encodeURIComponent(JSON.stringify(payParam));
                    wx.miniProgram.navigateTo({
                      url: url
                    });
                  }
                },
                error => {
                  console.log(error);
                }
              );
          }
        });

        //
      } else {
        sendPay(`${window.host}registration/pay`, {
          id: this.key
        }).then(response => {
          if (response.data.code == "200") {
            window.location.href = response.data.data.url;
          } else {
            //console.log(response)
            this.$vux.toast.show({
              type: "warn",
              text: response.data.msg
            });
          }
        });
      }
    },
    pay1() {
      //去支付
      this.axios
        .post(
          `${window.host}registration/pay`,
          qs.stringify({
            //raceid: this.raceid,
            id: this.key
          })
        )
        .then(response => {
          if (response.data.code == "200") {
            window.location.href = response.data.data.url;
          } else {
            //console.log(response)
            this.$vux.toast.show({
              type: "warn",
              text: response.data.msg
            });
          }
        });
    }
  },
  directives: {
    TransferDom
  },
  components: {
    Alert,
    ViewBox,
    GroupTitle,
    CellFormPreview,
    Card,
    PopupRadio,
    Radio,
    Tabbar,
    TabbarItem,
    debounce,
    XInput,
    Group,
    XButton,
    Grid,
    GridItem,
    FormPreview,
    Cell,
    LoadMore,
    Actionsheet,
    Toast,
    Confirm,
    XDialog
  }
};
</script>


<style lang="less" rel="stylesheet/less">
.signedlist {
  // position: relative;
}

.signedlist .max {
  width: 100%;
  height: 100%;
  background: white;
  //position: absolute;
  z-index: 11;
  top: -20px;
}

#signedlist .xxx {
  display: none;
}

.xxx .weui-dialog {
  padding-top: 25px;
}

#signedlist .weui-form-preview__hd .weui-form-preview__value {
  font-size: 1.2em;
}

#signedlist .weui-form-preview__hd {
  overflow: auto;
  height: 1%;
}

#signedlist {
  margin-top: -10px;
  padding-top: 10px;
  background: #fbf9fe;
}

#signedlist .weui-cells__title + .weui-cells {
  margin-top: -12px;
}

#signedlist .vux-label {
  color: #999999;
}

#signedlist .weui-panel {
  //z-index: 99;
}

body .app {
  max-width: 100%;
  margin: 0 auto;
  z-index: -1;
  position: absolute;
  top: 0;
}
body .app img {
  width: 100%;
  max-width: 100%;
}

body .recommend {
  text-align: center;
}

body .cc {
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
body .aa,
#signedlist .bb {
  float: left;
}
body .aa {
  width: 60%;
  position: absolute;
  top: 0;
  bottom: 0;
}
body .bb {
  padding-left: 60%;
}

body .aa > div {
  display: table;
  height: 100%;
}

body .aa > div > h4 {
  display: table-cell;
  vertical-align: middle;
  padding-left: 15px;
  padding-right: 15px;
}

#signedlist .tip {
  background: #24a2ff;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  line-height: 15px;
  text-indent: 5px;
  color: white;
  position: relative;
  top: -5px;
  font-size: 12px;
}
</style>

